<template>
	<view class="backgroud">
		<!-- 上半部分 -->
		<view class="item-top">
			<!-- 返回箭头 -->
			<view>
				<image src="../../static/AK-YK_我的.svg" class="back666" mode="heightFix" @tap="tomypage"></image>
			</view>
			<!-- 恋爱值那一行 -->
			<view class="love-value-lines">
				<!-- 恋爱值 -->
				<view class="love-value">
					恋爱值：{{this.love}}
				</view>
				<!-- 规则 -->
				<view class="rules">
					<text class="rulestext">规则</text>
				</view>
			</view>
			<!-- 心跳值那一行 -->
			<view class="lovebeat-value-lines">
				<!-- 心跳值 -->
				<view class="lovebeat-text1" v-if="Isme">
					心跳值
				</view>
				<view class="lovebeat-text1" v-else>
					给Ta设置
				</view>
				<!-- 图标 -->
				<view>
					<image src="../../static/恋爱值红星.svg" class="littlelove" mode="heightFix"></image>
				</view>
				<view class="lovebeat-text2" @tap="Torewardforme" v-if="Isme">
					兑换奖励
				</view>
				<view class="lovebeat-text2" @tap="Torewardforta" v-else>
					心跳值奖励
				</view>
				<!-- 箭头 -->
				<view @tap="Torewardforme" v-if="Isme">
					<image src="../../static/back.png" class="lovebeat-value-lines-back" mode="heightFix"></image>
				</view>
				<view @tap="Torewardforta" v-else>
					<image src="../../static/back.png" class="lovebeat-value-lines-back" mode="heightFix"></image>
				</view>
			</view>
		</view>
		<!-- 选项框 -->
		<view class="choice">
			<view class="lovebeat-me" @tap="makeselecttrue"
				:style="{'background-color': Isme?'white':'transparent','color':Isme? '#FA57B6':'white'}">
				我的心跳值：{{this.heartTotalme}}
			</view>
			<view class="lovebeat-ta" @tap="makeselectfalse"
				:style="{'background-color': Isme?'transparent':'white','color':Isme? 'white':'#FA57B6'}">
				ta的心跳值：{{this.heartTotalta}}
			</view>
		</view>
		<!-- 图表 -->
		<view class="table">
			<view v-if="Isme==true">
				<image src="../../static/内容wo.png" class="Charts" mode="heightFix"></image>
			</view>
			<view v-else>
				<image src="../../static/内容ta.png" class="Charts" mode="heightFix"></image>
			</view>
		</view>

		<!-- 下半段 -->
		<view class="bottom-me" v-if="Isme==true">
			<view class="items" v-for="(itemme,index) in listme">
				<view class="kuangjia">
					<!--左边-->
					<view class="item-left">
						<!-- 数字 -->
						<view class="item-left-num">
							{{index+1}}
						</view>
						<!-- 事件  时间 -->
						<view class="item-left-other">
							<!-- 事件 -->
							<view class="item-left-other-title">
								{{itemme.action}}
							</view>
							<!-- 时间 -->
							<view class="item-left-other-times">
								{{itemme.times}}
							</view>
						</view>
					</view>
					<!--右边-->
					<view class="item-right">
						<!-- 加减号 -->
						<view class="item-right-sign">
							<image src="../../static/加号.svg" class="item-right-sign" mode="widthFix"
								v-if="itemme.isAdd==='true'"></image>
							<image src="../../static/Line 1.png" class="item-right-sign" mode="widthFix" v-else></image>
						</view>
						<!-- 数字 -->
						<view class="item-right-num" :style="{'color':itemme.isAdd==='true'?'#FA57B6':'#63A1FE'}">
							{{itemme.numberChange}}
						</view>
						<!-- 其他 -->
						<view class="item-right-other">
							<!-- 心 -->
							<view class="item-right-other-img">
								<image src="../../static/Vector.png" mode="heightFix" class="item-right-other-img"
									v-if="itemme.isAdd==='true'"></image>
								<image src="../../static/xingblue.png" mode="heightFix" class="item-right-other-img"
									v-else></image>
							</view>
							<!-- 总分 -->
							<view class="item-right-other-total">
								{{itemme.total}}
							</view>
						</view>
						<!-- 箭头 -->
						<view class="item-right-back-bas">
							<view class="item-right-back">
								<image src="../../static/bottombackred.png" class="item-right-back" mode="heightFix"
									@tap="toheartdetail(itemme.numberChange,itemme.action,itemme.times,itemme.detail,itemme.id,'me')"
									v-if="itemme.isAdd==='true'"></image>
								<image src="../../static/bottombackblue.png" class="item-right-back" mode="heightFix"
									@tap="tobreakdetail(itemme.numberChange,itemme.action,itemme.times,itemme.detail,itemme.id,'me')"
									v-else></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-ta" v-else>
			<!-- 加号减号 -->
			<view class="plusbutton">
				<image src="../../static/ta_top_add.png" class="ta-top-sign" @tap="toaddbeat()" mode="widthFix"></image>
			</view>
			<view class="minusbutton">
				<image src="../../static/ta-top-jian.png" class="ta-top-sign" @tap="toaddbreak()" mode="widthFix">
				</image>
			</view>
			<view class="items" v-for="(itemta,index) in listta">
				<view class="kuangjia">
					<!--左边-->
					<view class="item-left">
						<!-- 数字 -->
						<view class="item-left-num">
							{{index+1}}
						</view>
						<!-- 事件  时间 -->
						<view class="item-left-other">
							<!-- 事件 -->
							<view class="item-left-other-title">
								{{itemta.action}}
							</view>
							<!-- 时间 -->
							<view class="item-left-other-times">
								{{itemta.times}}
							</view>
						</view>
					</view>
					<!--右边-->
					<view class="item-right">
						<!-- 加减号 -->
						<view class="item-right-sign">
							<image src="../../static/加号.svg" class="item-right-sign" mode="widthFix"
								v-if="itemta.isAdd==='true'"></image>
							<image src="../../static/Line 1.png" class="item-right-sign" mode="widthFix" v-else></image>
						</view>
						<!-- 数字 -->
						<view class="item-right-num" :style="{'color':itemta.isAdd==='true'?'#FA57B6':'#63A1FE'}">
							{{itemta.numberChange}}
						</view>
						<!-- 其他 -->
						<view class="item-right-other">
							<!-- 心 -->
							<view class="item-right-other-img">
								<image src="../../static/Vector.png" mode="heightFix" class="item-right-other-img"
									v-if="itemta.isAdd==='true'"></image>
								<image src="../../static/xingblue.png" mode="heightFix" class="item-right-other-img"
									v-else></image>
							</view>
							<!-- 总分 -->
							<view class="item-right-other-total">
								{{itemta.total}}
							</view>
						</view>
						<!-- 箭头 -->
						<view class="item-right-back-bas">
							<view class="item-right-back">
								<image src="../../static/bottombackred.png" class="item-right-back" mode="heightFix"
									@tap="toheartdetail(itemta.numberChange,itemta.action,itemta.times,itemta.detail,itemta.id,'ta')"
									v-if="itemta.isAdd==='true'"></image>
								<image src="../../static/bottombackblue.png" class="item-right-back" mode="heightFix"
									@tap="tobreakdetail(itemta.numberChange,itemta.action,itemta.times,itemta.detail,itemta.id,'ta')"
									v-else></image>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		number
	} from 'prop-types';
	export default {
		onLoad(options) {
			this.id = uni.getStorageSync("id");
			this.cpId = uni.getStorageSync("cpId");
		},
		onShow() {

			uni.request({
					header: {
						token: uni.getStorageSync("token")
					},
					data: {
						accountId: this.id
					},
					url: this.$baseUrl + "/item/getItem",
					method: 'POST',
					success: (res) => {
						this.listme = res.data;
						this.listme.reverse();
					},
					fail: (error) => {
						console.log(error);
					}

				}),

				uni.request({
					header: {
						token: uni.getStorageSync("token")
					},
					data: {
						accountId: this.cpId
					},
					url: this.$baseUrl + "/item/getItem",
					method: 'POST',
					success: (res) => {
						this.listta = res.data;
						this.listta.reverse();
					},
					fail: (error) => {
						console.log(error);
					}

				}),

				uni.request({
					header: {
						token: uni.getStorageSync("token")
					},
					data: {
						id: this.id
					},
					url: this.$baseUrl + "/user/getHeartTotal",
					method: 'POST',
					success: (res) => {
						this.heartTotalme = res.data
					}
				}),

				uni.request({
					header: {
						token: uni.getStorageSync("token")
					},
					data: {
						id: this.cpId
					},
					url: this.$baseUrl + "/user/getHeartTotal",
					method: 'POST',
					success: (res) => {
						this.heartTotalta = res.data
					}
				}),

				uni.request({
					header: {
						token: uni.getStorageSync("token")
					},
					data: {
						id: this.id
					},
					url: this.$baseUrl + "/user/getLove",
					method: 'POST',
					success: (res) => {
						this.love = res.data
					}
				})
		},
		data() {
			return {
				Isme: true,
				love: '',
				heartTotalme: "",
				heartTotalta: "",
				id: "",
				cpId: "",
				listme: [],
				listta: [],
			}
		},
		methods: {
			makeselecttrue() {
				this.Isme = true;
			},
			makeselectfalse() {
				this.Isme = false;
			},
			Torewardforme() {
				uni.navigateTo({
					url: '/pages/rewardforme/rewardforme'
				})
			},
			Torewardforta() {
				uni.navigateTo({
					url: '/pages/rewardforta/rewardforta'
				})
			},
			toaddbeat() {
				uni.navigateTo({
					url: '/pages/addheartbeat/addheartbeat'
				})
			},
			toaddbreak() {
				uni.navigateTo({
					url: '/pages/addheartbreak/addheartbreak'
				})
			},
			tobreakdetail(numberChange, action, times, detail, id, type, accountId, cpId) {
				uni.setStorageSync("numberChange", numberChange);
				uni.setStorageSync("action", action);
				uni.setStorageSync("times", times);
				uni.setStorageSync("detail", detail);
				uni.setStorageSync("itemId", id);
				uni.setStorageSync("type", type);

				uni.navigateTo({
					url: '/pages/breakdetail/breakdetail'
				})
			},
			toheartdetail(numberChange, action, times, detail, id, type, accountId, cpId) {
				uni.setStorageSync("numberChange", numberChange);
				uni.setStorageSync("action", action);
				uni.setStorageSync("times", times);
				uni.setStorageSync("detail", detail);
				uni.setStorageSync("itemId", id);
				uni.setStorageSync("type", type);
				uni.navigateTo({
					url: '/pages/heartdetail/heartdetail'
				})
			},
			tomypage() {
				uni.navigateTo({
					url: "/pages/mypage/mypage"
				})
			}
		}
	}
</script>

<style>
	.backgroud {
		background: linear-gradient(197.99deg, #2C9AFF -14.52%, #9C74F3 16.96%, #EC81B4 54.17%, #F1BC97 74.34%, #F4E283 100%);
		min-height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.back666 {
		position: absolute;
		height: 30px;
		top: 50px;
	}

	.item-top {
		padding-left: 24px;
		padding-top: 68px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.love-value {
		font-family: PingFang SC;
		font-size: 36px;
		font-weight: 500;
		line-height: 36px;
		letter-spacing: 0px;
		color: #FFFFFF;
	}

	.love-value-lines {
		margin-top: 25px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between
	}

	.rules {
		width: 47px;
		height: 36px;
		background: #E5E5E5;
		mix-blend-mode: normal;
		opacity: 0.3;
		border-radius: 30px 0px 0px 30px;
		padding-left: 12px;
		display: flex;
		align-items: center;
		box-sizing: border-box;

	}

	.rulestext {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		line-height: 36px;
		/* identical to box height, or 257% */
		text-align: center;

		color: black;
	}

	.lovebeat-value-lines {
		margin-top: 18px;
		height: 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
	}

	.lovebeat-text1 {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 20px;
		line-height: 20px;
		/* identical to box height, or 100% */
		color: #FFFFFF;
	}

	.lovebeat-text2 {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 20px;
		line-height: 20px;
		/* identical to box height, or 100% */
		color: #FFFFFF;
		padding-left: 12.73px;
	}

	.littlelove {
		padding-left: 12.73px;
		width: 14.54px;
		height: 12.86px;
	}

	.lovebeat-value-lines-back {
		padding-left: 18px;
		height: 18px;
		width: 9px;
	}

	.choice {
		margin-top: 24px;
		margin-left: 24px;
		margin-right: 24px;
		width: auto;
		min-height: 36px;
		background-color: transparent;
		border-radius: 36px;
		overflow: hidden;
		border-color: white;
		border-style: solid;
		border-width: 3px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: transparent;
	}

	.lovebeat-me {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-top-left-radius: 36px;
		border-bottom-left-radius: 36px;
		font-family: PingFang SC;
		font-size: 18px;
		font-weight: 500;
		line-height: 25px;
		letter-spacing: 0px;

	}

	.lovebeat-ta {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-top-right-radius: 36px;
		border-bottom-right-radius: 36px;
		font-family: PingFang SC;
		font-size: 18px;
		font-weight: 500;
		line-height: 25px;
		letter-spacing: 0px;
	}

	.Charts {
		width: 375px;
		height: 279px;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.bottom-me {
		margin-top: 32px;
		flex: 1;
		width: 100vw;
		padding-left: 24px;
		padding-right: 24px;
		box-sizing: border-box;
	}

	.kuangjia {
		width: auto;
		height: 50px;
		margin-bottom: 12px;
		background-color: white;
		border-radius: 50px;
		padding: 10px 24px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.item-left {
		height: 100%;
		display: flex;
	}

	.item-left-num {

		font-family: 'PingFang SC';
		font-style: normal;
		display: flex;
		font-weight: 500;
		font-size: 14px;
		line-height: 14px;
		justify-content: center;
		align-items: center;
		color: #000000;
		opacity: 0.2;
	}

	.item-left-other {
		height: 100%;
		margin-left: 24px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.item-left-other-title {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 16px;
		/* identical to box height, or 100% */


		/* 带蓝深 */

		color: #121B36;
	}

	.item-left-other-times {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 10px;
		line-height: 10px;
		/* identical to box height, or 100% */


		color: #000000;

		opacity: 0.2;
	}

	.item-right {
		height: 100%;
		display: flex;
	}


	.item-right-sign {
		position: relative;
		top: 2.5px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 10px;
		height: 10px;
	}

	.item-right-num {
		width: 10px;
		margin-left: 16px;
		height: 18px;
	}

	.item-right-other {
		margin-left: 8px;
		width: 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.item-right-other-img {
		width: 14px;
		height: 14px;
	}


	.item-right-other-total {
		margin-top: 8px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		line-height: 14px;
		/* identical to box height, or 100% */

		text-align: center;

		/* 带蓝深 */

		color: #121B36;
	}

	.item-right-back-bas {
		height: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 24px;
	}

	.item-right-back {
		width: 10px;
		height: 16px;
	}

	.table {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-ta {
		margin-top: 20px;
		flex: 1;
		position: relative;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 36px 36px 0px 0px;
		box-sizing: border-box;
		padding-top: 24px;
		padding-left: 24px;
		padding-right: 24px;

	}

	.plusbutton {
		background-color: #FECACA;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		position: absolute;
		right: 112px;
		top: -22px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.minusbutton {
		background-color: #A2C7FE;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		position: absolute;
		right: 33px;
		top: -22px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ta-top-sign {
		width: 16px;
	}
</style>